<template>
  <div class="err" id="err" ref="err">
    <div @click="tiao('Guifu')" class="dao">
      <van-circle
        v-model="currentRate"
        :rate="rate"
        :speed="20"
        :text="text"
        :stroke-width="60"
        color="red"
        size="150px"
      />
    </div>

    <img :src="pic" class="myimg" alt="" />
    <span
      v-for="(item, index) in list"
      :key="index"
      class="spanxingxing"
      :style="{
        top: item.y,
        left: item.x,
        animationDelay: item.rate + 's',
        transform: 'scale(' + item.scaler + ')',
        background: item.rgba,
      }"
    ></span>
  </div>
</template>
<script>
import pic from "@/assets/images/503.png";
import { mixin } from "@/utils";
import { Circle } from "vant";
export default {
  data() {
    return {
      pic,
      list: [],
      currentRate: 0,
      rate: "100",
      mixins: [mixin],
    };
  },
  computed: {
    text() {
      return (5-Math.floor(this.currentRate/20))+"s";
    },
  },
  watch: {
    currentRate(v){
      if(v==100){
        this.tiao('Guifu')
      }
    }
  },
  methods: {
    spanxingxing() {
      let width = document.getElementById("err").clientWidth;
      let height = this.$refs.err.clientHeight;
      console.log(width, height);

      for (let i = 0; i < 520; i++) {
        //随机位置
        let x = Math.floor(Math.random() * width);
        let y = Math.floor(Math.random() * height);

        //随机频率
        let rate = Math.random() * 1.5;

        //随机大小
        let scaler = Math.random() * 1.5;

        //随机颜色
        let r = Math.floor(Math.random() * 255);
        let g = Math.floor(Math.random() * 255);
        let b = Math.floor(Math.random() * 255);
        let a = Math.random() * 1;

        this.list.push({
          x: x + "px",
          y: y + "px",
          rate,
          scaler,
          rgba: `rgba(${r},${g},${b},${a})`,
        });
      }
    },
  },
  mounted() {
    this.spanxingxing();
  },
};
</script>
<style lang="scss" scoped>
.err {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    z-index: 10;
  }
  .spanxingxing {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
</style>
